<template>
	<view class="border-top border-light-secondary p-3">
		<view class="rounded py-4 bg-main flex flex-column align-center justify-center">
			<text class="text-white font-sm mb-1">当前金币</text>
			<text class="font-weight-bold text-white" style="font-size: 60rpx;">1000</text>
		</view>
		<view class="my-3 border-top border-light-secondary">

		</view>
		<view class="">
			<text>请选择充值金币</text>
		</view>
		<view class="flex flex-wrap" style="margin-left: -20rpx;margin-right: -20rpx;">
			<view class="p-2" style="width: 33.3%; box-sizing: border-box;" @click="chooseCoin(index)" v-for="(item,index) in 	list"
			 :key="index">
				<view v-if="item.price>0"  :class="activeIndex === index ? 'border-main' : '' " class="flex flex-column rounded border align-center justify-center" style="height: 130rpx;">
					<view  class="flex align-center">
						<text class="iconfont text-warning mr-1">&#xe633;</text>
						<text class="font-sm">10</text>
					</view>
					<text class="font-sm font-weight-bold text-muted">￥10</text>
				</view>
				<view v-else class="flex flex-column rounded border align-center justify-center" style="height: 130rpx;">
					<text class="font-sm font-weight-bold text-muted">自定义</text>
				</view>
			</view>
		</view>
		<view class="position-fixed left-0 bottom-0 right-0 border-top flex px-3 align-center" style="height: 100rpx;">
					<view class="flex align-center">
						<text class="iconfont text-warning mr-1">&#xe633;</text>
						<text class="font-md font-weight-bold">{{price}}</text>
					</view>
					<view class="bg-main rounded flex align-center justify-center ml-auto" style="width: 150rpx;height: 70rpx;">
						<text class="text-white font-md">充值</text>
					</view>
				</view>
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog mode="input" message="自定义充值" :duration="2000" placeholder="充值金额" inputType="number" :before-close="true"
			 @close="close" @confirm="confirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-ui/uni-popup/uni-popup.vue';
	import uniPopupDialog from '@/components/uni-ui/uni-popup/uni-popup-dialog.vue';
	export default {
		components: {
			uniPopup,
			uniPopupDialog
		},
		data() {
			return {
				activeIndex: 0,
				list: [{
					coin: 10,
					price: 10
				}, {
					coin: 20,
					price: 20
				}, {
					coin: 30,
					price: 30
				}, {
					coin: 50,
					price: 50
				}, {
					coin: 100,
					price: 100
				}, {
					price: 0
				}],
				price: 0
			}
		},
		onLoad() {
			let price = this.list[this.activeIndex].price
			if (price > 0) {
				this.price = price
			}
		},
		methods: {
			chooseCoin(index) {
				this.activeIndex = index
				let price = this.list[index].price
				if (price > 0) {
					this.price = price
				} else {
					this.$refs.popup.open()
				}
			},
			/**
			 * 点击取消按钮触发
			 * @param {Object} done
			 */
			close(done) {
				// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 done 才会关闭对话框
				// ...
				done()
			},
			/**
			 * 点击确认按钮触发
			 * @param {Object} done
			 * @param {Object} value
			 */
			confirm(done, value) {
				if (!value) {
					return uni.showToast({
						title: '请输入要充值的金额',
						icon: 'none'
					});
				}
				this.price = value
				this.$H.post('/gift/wxpay',{price:this.price},{token:true}).then(orderInfo=>{
					uni.requestPayment({
						provider: 'wxpay',
						orderInfo: orderInfo,
						success: res => {
							uni.showToast({
								title: '支付成功'
							});
							this.$store.dispatch('getUserInfo')
							uni.navigateBack({
								delta:1
							})
							
						},
						fail: () => {
							uni.showModal({
								content: '支付失败',
							});
						},
						complete: () => {}
					});
				})
				done()
			}
		}
	}
</script>

<style>

</style>
